<template>
	<div>
		<cl-crud @load="onLoad">
			<template #slot-top="{scope}">
				<div class="slot-top">
					<div class="slot-top-c">
						<icon-svg class="z" name="icon-logo"></icon-svg>
						当前共有{{ pending }}个提现中待审核 统计数据：
						<span>审核中:{{ countData.verifyIng }}</span>
						<span>待打款:{{ countData.verifyAndWait }}</span>
						<span>审核失败:{{ countData.verifyError }}</span>
						<span>提现成功:{{ countData.withDrawSuccess }}</span>
						<span>提现失败:{{ countData.withDrawError }}</span>
						<span>支出金额:{{countData.withDrawSuccessAmount}}</span>
					</div>
					<div class="slot-top-l"></div>
				</div>
			</template>
			<template #slot-head-pass>
				<el-button
					type="success"
					size="mini"
					@click="rowSelectChange('pass')"
					:disabled="selectRow.length == 0"
				>批量通过</el-button>
			</template>
			<template #slot-head-reject>
				<el-button
					type="danger"
					@click="rowSelectChange('reject')"
					size="mini"
					:disabled="selectRow.length == 0"
				>批量驳回</el-button>
			</template>
			<template #slot-head-remit>
				<el-button
					type="primary"
					size="mini"
					@click="rowSelectChange('pushMoney')"
					:disabled="selectRow.length == 0"
				>一键打款</el-button>
			</template>
			<!-- 时间状态筛选 -->
			<template #slot-datepicker="{scope}">
				<div class="filter-box">
					<span style="font-size:14px;margin-right:10px">申请时间</span>
					<date-picker
						@change="val => refresh({ startTime: val[0], endTime: val[1], page: 1 })"
						@refresh="refresh({ startTime: '', endTime: '', page: 1 })"
					></date-picker>
					<el-select
						size="mini"
						filterable
						v-model="statusType"
						style="margin-right: 10px;width:125px;margin-left:10px"
						@change="val => refresh({ status: val, page: 1 })"
					>
						<el-option label="全部" value></el-option>
						<el-option label="审核中" :value="0"></el-option>
						<el-option label="待打款" :value="1"></el-option>
						<el-option label="审核失败" :value="2"></el-option>
						<el-option label="提现成功" :value="3"></el-option>
						<el-option label="提现失败" :value="4"></el-option>
					</el-select>
				</div>
			</template>
			<template #slot-operate="{scope}">
				<div class="cursor">
					<div v-if="scope.row.status == '0'">
						<span style="color:#22DE48" @click="operate('pass', scope.row)" class="margin-right">通过</span>
						<span style="color:#F34D4D" @click="operate('reject', scope.row)">驳回</span>
					</div>
					<div v-else-if="scope.row.status == 2">
						<el-popover
							placement="top-start"
							title="原因"
							width="200"
							trigger="hover"
							:content="scope.row.reason"
						>
							<div slot="reference">查看驳回原因</div>
						</el-popover>
					</div>
					<div v-if="scope.row.status == 4" @click="pay(scope.row.id)">重新打款</div>
					<div v-if="scope.row.status == 4" @click="manualPay(scope.row.id)" style="color:#F34D4D; ">人工核销</div>
				</div>
			</template>
			<!-- 创建时间 -->
			<template #table-column-createTime="{scope}">
				<span>{{ scope.row.createTime }}</span>
			</template>
			<!-- 申请人 -->
			<template #table-column-name="{scope}">
				<applyInfo :item="scope.row"></applyInfo>
			</template>
			<!-- 提现账号 -->
			<template #table-column-phone="{scope}">
				<div v-if="scope.row.payWay == null">{{ scope.row.phone }}</div>
				<div class="apply-info" v-else-if="scope.row.payWay == 'alipay'">
					<div class="info">
						<div>帐户类型: 支付宝</div>
						<div>姓名：{{ scope.row.name || '--' }}</div>
						<div>
							帐号：
							<span
								style="cursor: pointer"
								@click="$router.push('/interactiveSoft/statistics?userId=' + scope.row.userId )"
							>{{ scope.row.account || '--' }}</span>
						</div>
						<div>手机号：{{ scope.row.aliPhone || '--' }}</div>
					</div>
				</div>
			</template>
			<!-- 审核状态 -->
			<template #table-column-status="{scope}">
				<div>
					<span v-if="scope.row.status == 0" style="color:#F34D4D">待审核</span>
					<span v-if="scope.row.status == 1" style="color:#22DE48">待打款</span>
					<span v-if="scope.row.status == 3" style="color:#22DE48">提现成功</span>
					<!-- <span v-if="scope.row.status == 1" style="color:#58F377"> 审核成功待打款</span> -->
					<el-tooltip
						effect="dark"
						:content="scope.row.reason"
						placement="top-start"
						v-if="scope.row.status == 2 || scope.row.status == 4"
					>
						<span v-if="scope.row.status == 2" style="color:#F34D4D">审核失败</span>
						<span v-if="scope.row.status == 4" style="color:#F34D4D">提现失败</span>
					</el-tooltip>
				</div>
			</template>

			<template #table-column-newPerson="{scope}">
				<div>
					<el-tag v-if="scope.row.newPerson == 1" type="success">是</el-tag>
					<el-tag v-else type="info">否</el-tag>
				</div>
			</template>
			<template #table-column-isBlack="{scope}">
				<div>
					<el-tag v-if="scope.row.isBlack == 1" type="success">是</el-tag>
					<el-tag v-else type="info">否</el-tag>
				</div>
			</template>
		</cl-crud>

		<cl-form ref="cl-form"></cl-form>
	</div>
</template>

<script>
import DatePicker from '@/components/common/date-picker';
import applyInfo from './components/withdraw/applyInfo';
import platform from '@/mixin/platform';
export default {
	data() {
		return {
			crud: null,
			selectRow: [], // 当前选中多少行
			statusType: '',
			pending: 0,
			countData: {}
		};
	},
	mixins: [platform],
	components: {
		applyInfo,
		DatePicker
	},
	methods: {
		handleCommand(command) {
			this.$message('click on item ' + command);
		},
		// 操作栏
		operate(status, row) {
			if (status === 'pass') {
				this.pass(row.id);
			} else if (status === 'reject') {
				this.reject(row.id);
			}
		},
		// 通过
		pass(ids) {
			this.$confirm('该操作会将会通过审核，是否确认？', '提示', {
				type: 'warning',
				confirmButtonText: '审核通过',
				cancelButtonText: '取消操作'
			})
				.then(() => {
					this.$service.auditMenagement.withdraw
						.pass({
							ids
						})
						.then(() => {
							this.$message({
								type: 'success',
								message: '操作成功'
							});
							this.crud.refresh();
						})
						.catch(err => this.$message.error(err));
				})
				.catch(() => {});
		},
		// 驳回
		reject(ids) {
			this.$confirm('该操作会将会驳回审核，是否确认？', '提示', {
				type: 'warning',
				confirmButtonText: '确认驳回',
				cancelButtonText: '取消驳回'
			})
				.then(() => {
					this.$refs['cl-form'].open({
						props: {
							width: '500px',
							labelWidth: '100px',
							center: true,
							'custom-class': 'custom-class-dialog-mini'
						},
						items: [
							{
								prop: 'reason',
								label: '拒绝原因',
								component: {
									name: 'textarea-input',
									data() {
										return {
											textarea: ''
										};
									},
									methods: {
										Change(e) {
											console.log(e);
											this.$emit('input', e);
										}
									},
									// eslint-disable-next-line
									render(h) {
										return (
											<el-input
												type="textarea"
												onChange={this.Change}
												rows={6}
												placeholder="请输入内容"
												v-model={this.textarea}></el-input>
										);
									}
								}
							}
						],
						on: {
							submit: ({ data, close }) => {
								// 提交事件
								this.$service.auditMenagement.withdraw
									.reject({
										ids,
										...data
									})
									.then(() => {
										this.$message({
											type: 'success',
											message: '操作成功'
										});
										this.crud.refresh();
										close();
									})
									.catch(err => this.$message.error(err));
							},

							close() {
								// 关闭事件
							}
						}
					});
				})
				.catch(() => {});
		},
		pay(ids) {
			this.$confirm('该操作会将会打款，是否确认？', '提示', {
				type: 'warning',
				confirmButtonText: '确认打款',
				cancelButtonText: '取消打款'
			})
				.then(() => {
					this.$service.auditMenagement.withdraw
						.pay({
							ids
						})
						.then(() => {
							this.$message({
								type: 'success',
								message: '操作成功,后台正在进行中，请稍后查看'
							});
							this.crud.refresh();
						})
						.catch(err => this.$message.error(err));
				})
				.catch(() => {});
		},
		//人工核销
		manualPay(ids) {
			this.$confirm('该操作表明您已经手动打款给该用户，是否确认？', '提示', {
				type: 'warning',
				confirmButtonText: '确认核销',
				cancelButtonText: '取消核销'
			})
				.then(() => {
					this.$service.auditMenagement.withdraw
						.manualPay({
							ids,
							status: 3
						})
						.then(() => {
							this.$message({
								type: 'success',
								message: '操作成功。'
							});
							this.crud.refresh();
						})
						.catch(err => this.$message.error(err));
				})
				.catch(() => {});
		},
		// 批量审核
		rowSelectChange(type) {
			let ids = '';
			this.selectRow.forEach(item => {
				if (ids == '') {
					ids += item.id;
				} else {
					ids += ',' + item.id;
				}
			});
			if (type === 'pass') {
				this.pass(ids);
			} else if (type === 'reject') {
				this.reject(ids);
			} else if (type == 'pushMoney') {
				this.pay(ids);
			}
		},
		refresh(data) {
			console.log(data);
			this.crud.refresh(data);
		},
		onLoad({ ctx, app }) {
			this.crud = app;

			ctx.service(this.$service.auditMenagement.withdraw)
				.set('dict', {
					label: {
						add: '添加用户'
					}
				})
				.set('table', {
					props: {
						'show-summary': false
					},
					on: {
						'selection-change': selection => {
							this.selectRow = selection;
						}
					},
					columns: [
						{
							type: 'selection',
							align: 'center',
							width: 60
						},
						{
							label: '序号',
							type: 'index',
							align: 'center'
						},
						{
							label: '申请人',
							prop: 'name',
							align: 'center',
							'min-width': 110
						},
						{
							label: '提现账号',
							prop: 'phone',
							align: 'center',
							emptyText: '--'
						},
						{
							label: '提现金额',
							prop: 'amount',
							align: 'center'
						},
						{
							label: '是否新人',
							prop: 'newPerson',
							align: 'center'
						},
						{
							label: '是否拉黑',
							prop: 'isBlack',
							align: 'center'
						},
						{
							label: '申请时间',
							prop: 'createTime',
							align: 'center',
							'min-width': '150'
						},

						{
							label: '审核状态',
							prop: 'status',
							align: 'center',
							'min-width': '100'
						}
						// {
						// 	label: '处理时间',
						// 	prop: 'endTime',
						// 	align: 'center',
						// 	'min-width': '150'
						// }
					],

					op: {
						layout: ['slot-operate']
					}
				})
				.set('upsert', {
					props: {
						labelWidth: '150px'
					},
					items: []
				})
				.set('layout', [
					['slot-top'],
					[
						'refresh-btn',
						'slot-head-pass',
						'slot-head-reject',
						'slot-head-remit',
						'query',
						'flex1',
						'slot-datepicker',
						'search-key'
					],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('refresh', async (params, { next }) => {
					let { list, subData, countData } = await next(params);
					list.map(e => {
						e.balance = '￥' + e.balance;
						e.withdraw = '￥' + e.withdraw;
					});
					this.pending = subData.pending;
					this.countData = countData;
				})
				.done();

			app.refresh({
				prop: 'createTime',
				order: 'desc'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.cl-crud {
	padding: 0;
	::v-deep .el-row--1 {
		padding: 0 10px;
	}
	::v-deep .crud-data-table {
		padding: 0 10px;
	}
	::v-deep .el-row:last-child {
		padding: 0 10px;
	}
}
.slot-top {
	width: 100%;
	.slot-top-c {
		height: 48px;
		line-height: 48px;
		background: rgba(255, 255, 255, 1);
		border-radius: 8px;
		font-size: $font16;
		@include flexBox(flex-start);
		color: $main-light;
		padding-left: 15px;
		.z {
			width: 22px;
			height: 22px;
			margin-right: 5px;
		}
		span {
			margin-right: 10px;
		}
	}
	.slot-top-l {
		height: 10px;
		background-color: $bg-grey;
		width: 100%;
	}
}
.filter-box {
	@include flexBox();
}

.el-button--success {
	border-width: 0;
	background-color: #4df36e;
	&:hover {
		// opacity:.8
		background-color: rgba(77, 243, 110, 0.8);
	}
}
.el-button--success.is-disabled {
	background-color: rgba(77, 243, 110, 0.8);
	&:hover {
		opacity: 1;
	}
}
.apply-info {
	.user {
		flex: 1;
		font-size: $font14;
		color: #666666;
	}
	.info {
		flex: 2;
		color: $text-grey;
		font-size: $font12;
	}
}
</style>
